* {
  box-sizing: border-box;
  
  /*box-sizing属性负责内容呈现方式，并不是默认的，而是宽和高直接控制边框的大小，边框宽度和内边距都包含在内*/
}

body {
  margin: 0;
  font-family: Arial 楷体;
}

img {
  width: 100%;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* 创建并排的四个等列 */
.column {
  flex: 25%; /*这行其实可有可无。指定的是flex-basis。因为每一列的宽度都为25%，下面已经指定了。所以删掉它依然能显示*/
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}
/*CSS3 @media 查询 表示根据情况进行判断。常用在响应式布局。
  /* 超小设备 (手机, 600px 以下屏幕设备) 
@media only screen and (max-width: 600px) {
  .example {
    background: red;
  }
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) 
@media only screen and (min-width: 600px) {
  .example {
    background: green;
  }
}

/* 中型设备（平板电脑，768 像素及以上）
@media only screen and (min-width: 768px) {
  .example {
    background: blue;
  }
}

/* 大型设备（笔记本电脑/台式机，992 像素及以上）
@media only screen and (min-width: 992px) {
  .example {
    background: orange;
  }
}

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） 
@media only screen and (min-width: 1200px) {
  .example {
    background: pink;
  }
}

*/
/* 响应式布局 - 创建两列而不是四列布局 */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 响应式布局 - 创建上下堆叠而不是并排的两列布局 */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
